<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight()" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" :title="title">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>
			<view class="list">
				<view v-for="(item,index) in list" :key="index">
					<view @click="itemClick(index)" class="item flex-row-space-between">
						<view class="name">
							{{item}}
						</view>
						<image  v-if='wzIndex==index' class="wxImage" src="/static/common/xz.png" mode=""></image>
						<image v-else class="wxImage" src="/static/common//wxz.png" mode=""></image>
					</view>
					<view class="line">
						
					</view>
				</view>
			</view>
			<view @click="cancelOrder" class="button flex-row-center">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cancelOrder,
		getConfig
	} from '@/api/personalCenter.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				config:{},
				order_id:0,
				wzIndex:0,
				title: '取消订单',
				border: false,
				list:[
					'行程有变'
				]

			}
		},
		onShow() {

		},
		onLoad(e) {
if(e.order_id){
				this.order_id=e.order_id
				
			}
			this.config = uni.getStorageSync('config')
			this.list=this.config.user_cancel_order_type
			this.getConfig()
		},

		methods: {
			getConfig(){
				
				getConfig().then(res => {
					this.config=res.data
					uni.setStorageSync('config', this.config)
					this.list=this.config.user_cancel_order_type
					})
			},
			itemClick(index){
			this.wzIndex=index	
			},
			cancelOrder(){
				var that=this
				var data={
					order_id:this.order_id,
					cancel_reason:this.list[this.wzIndex]
				}
				cancelOrder(data)
					.then(res => {
						that.showToast(res.msg)
						  setTimeout(() => {
						         uni.navigateBack()
						                }, 2000)
						
						
					})
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #F5F6F7;
}
.list{
	margin: 30rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
}
.item{
	height: 100rpx;
	padding: 0 30rpx;
	
}
.name{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.button{
	margin: 100rpx 30rpx;
	height: 90rpx;
	background: #26D360;
	border-radius: 45rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
.line{
	height: 2rpx;
	background: #F5F6F7;
}
.wxImage {
		
			width: 16px;
			height: 16px;
		}
</style>
